<template>
    <div style="margin-top: 20px;">
        <el-table :data="roleList" border stripe style="width: 100%">
            <el-table-column prop="id" label="编号" width="100">
            </el-table-column>
            <el-table-column prop="rolename" label="权限名称" width="180">
            </el-table-column>
            <el-table-column label="操作" width="240">
                <template slot-scope="scope">
                    <el-button size="mini" @click="showAssignPermission(scope.row.id)">权限分配</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="权限分配" :visible.sync="dialogVisible" width="37%">
            <el-tree :data="menuList" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" :default-expanded-keys="ids">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatePermission()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            menuList: [],
            permid: '',
            ids: [],
            defaultProps: {
                id: 'permid',
                children: 'children',
                label: 'permname'
            },
            roleList: [],
            pageInfo: {
                pageNum: 1,
                pageSize: 8
            },
        }
    },
    methods: {
        updatePermission() {
            let ids = this.$refs.tree.getCheckedKeys();
            let str = "?id=" + this.permid;
            for (let i = 0; i < ids.length; i++) {
                str += "&ids=" + ids[i];
            }
            this.$axios.get("/role/updateRole" + str)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.dialogVisible = false;
                    } else {
                        this.$message.error('修改失败');
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        showAssignPermission(permid) {
            console.log(permid);
            this.dialogVisible = true;
            this.ids = [];
            this.permid = permid;
            this.$axios.get("/perm/selectPermAll")
                .then((result) => {
                    if (result.data.code == 200) {
                        this.menuList = result.data.data;
                    }
                    this.$axios.get("/role/selectById?id=" + permid)
                        .then((result) => {
                            if (result.data.code == 200) {
                                let list = result.data.data;
                                for (let i = 0; i < list.length; i++) {
                                    this.ids.push(list[i].id);
                                }
                                this.$refs.tree.setCheckedKeys(this.ids);
                            }
                        }).catch((err) => {
                            console.log(err);
                        });
                }).catch((err) => {
                    console.log(err);
                });
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNum = val;
            this.showList();
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
            this.showList();
        },
        showList() {
            this.$axios.get("/role?pageNum=" + this.pageInfo.pageNum + "&pageSize=" + this.pageInfo.pageSize)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.pageInfo = result.data.data;
                        this.roleList = result.data.data.list;
                    }
                }).catch((err) => {
                    console.log(err);
                });
        }
    },
    mounted() {
        this.showList();
    },
};
</script>

<style></style>
